<style lang="less">
 .login-input > .ivu-input-group .ivu-input, .ivu-input-group .ivu-input-inner-container {
    width: 100%;
    float: left;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    height: 34px;
    border-bottom: 1px solid #999;
 }
 .identify-div .ivu-input-group .ivu-input, .ivu-input-group .ivu-input-inner-container {
   width: 100%;
   float: left;
   margin-bottom: 0;
   position: relative;
   z-index: 2;
   border-bottom-left-radius: 0 !important;
   border-top-left-radius: 0 !important;
   border-top-style: none;
   border-right-style: none;
   border-left-style: none;
   border-bottom-style: none;
   border-bottom: #999 1px solid;
   background-color: transparent;
   border-radius: 0px;
   height: 61px;
   font-size: 20px;
 }
</style>
<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="userName" class="login-input">
      <Input v-model="form.userName" placeholder="请输入用户名" style="outline:none;background-color:#f3f3f3;height:34px">
        <span slot="prepend">
          <Icon :size="25" type="ios-phone-portrait"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码" style="outline:none;background-color:#f3f3f3;height:34px">
        <span slot="prepend">
          <Icon :size="25" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="identify_code" class="identify-div">
      <Input type="text" v-model="form.identify_code" placeholder="输入验证码" style="outline:none;background-color:#f3f3f3;height:34px;">
        <!-- <span slot="prepend">
          <Icon :size="25" type="md-lock"></Icon>
        </span> -->
        <span slot="append">
          <div @click="refreshCode"><s-identify :identifyCode="identifyCode"></s-identify></div>
        </span>
      </Input>
    </FormItem>
    <FormItem>
      <Button @click="handleSubmit" long style="color: white;
    font-size: 1.2rem;border-radius: 50px;background:linear-gradient(to right,#f4a323,#f46921);margin-bottom: -10%;
    height: 45px;font-weight: bold;">登 录</Button>
    </FormItem>
  </Form>
</template>
<script>
import SIdentify from '../identify/identify'
export default {
  name: 'LoginForm',
  components: { SIdentify },
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      form: {
        userName: '',
        password: ''
      },
      identifyCodes: '1234567890',
      identifyCode: ''
    }
  },
  computed: {
    rules () {
      return {
        userName: this.userNameRules,
        password: this.passwordRules,
        identify_code: this.identufyCodeRules
      }
    }
  },
  mounted () {
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  methods: {
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
      // console.log(this.identifyCode)
    },
    handleSubmit () {
      if (this.form.identify_code === '' || this.form.identify_code === undefined) {
        this.$Modal.error({
          title: '错误',
          content: '验证码不能为空'
        })
        return
      }
      if (this.form.identify_code !== this.identifyCode) {
        this.$Modal.error({
          title: '错误',
          content: '验证码输入不正确'
        })
        return
      }
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            userName: this.form.userName,
            password: this.form.password
          })
        }
      })
    }
  }
}
</script>
